<!doctype html>
<html>
  
  <head>
    <title>Divshot: Getting Started</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta content="text/html; charset=UTF-8" http-equiv="Content-Type">
    <link rel="stylesheet" href="css/bootstrap.css">
    <link rel="stylesheet" href="css/bootstrap-responsive.css">
    <script src="js/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
  </head>
  
  <body>
    <div class="navbar navbar-fixed-top">
      <div class="navbar-inner">
        <div class="container">
          <a class="brand" href="#">Welcome to Divshot!</a>
          <div class="navbar-content">
            <ul class="nav  pull-right">
              <li class="active">
                <a href="#">Quickstart</a> 
              </li>
              <li>
                <a href="#">Home</a> 
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
    <div class="container">
      <div class="page-header">
        <h1>The Divshot Quickstart Guide</h1>
      </div>
      <div class="alert alert-info hidden-phone">
        <a class="close" data-dismiss="alert">×</a>
        <span><b>Ready to dive in?</b>&nbsp;Click the page name dropdown in the top left and create a new page using the embedded form.</span> 
      </div>
      <p class="lead">Divshot is a visual interface builder for web applications. Everything
        you see is real HTML and CSS. This page has a few quick tips to get you
        started. If you run into trouble, just click your name (top right) and
        then click "Share Feedback."</p>
      <div class="row">
        <div class="span4">
          <div class="well">
            <h4>Adding Components</h4>
            <p>To add a component, just drag it from the list on the right onto the canvas.</p>
          </div>
          <div class="well">
            <h4>Exporting HTML</h4>
            <p>Divshot is built to give you usable code. Just click the "Export Code"
              button in the top toolbar.</p>
          </div>
        </div>
        <div class="span4">
          <div class="well">
            <h4>Editing Content</h4>
            <p>You can edit the text sections of a component by double-clicking. Try
              editing this text!</p>
          </div>
          <div class="well">
            <h4>Responsive Design</h4>
            <p>Divshot designs look great on any device. Click the laptop icon to preview
              for phone, tablet, or desktop.</p>
          </div>
        </div>
        <div class="span4">
          <div class="well">
            <h4>Configuring Components</h4>
            <p>Each component has different options. The "Inspector" panel on the right
              lets you change them.</p>
          </div>
          <div class="well">
            <h4>Custom HTML</h4>
            <p>Drop the "Custom HTML" component onto the page and double click it to
              add arbitrary HTML.</p>
          </div>
        </div>
      </div>
      <p class="text-info lead">While using Divshot, your changes are automatically saved to the server
        as you make them so you never have to worry about losing your work.</p>
    </div>
  </body>

</html>